<template>
  <div class="header-info">
    <div class="operation">
      <span
        ><el-icon><Message /></el-icon
      ></span>
      <span>
        <span class="dot"></span>
        <el-icon><ChatDotRound /></el-icon
      ></span>
      <span
        ><el-icon><Search /></el-icon>
      </span>
    </div>
    <!-- 个人信息 -->
    <div class="info">
      <el-dropdown>
        <span class="user-info">
          <!-- 头像 -->
          <el-avatar
            :size="30"
            src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fblog%2F202107%2F19%2F20210719150601_4401e.thumb.1000_0.jpg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1683081505&t=4d285e356854b4c4fc14f0205ae3661b"
          />
          <span class="name">Ferry</span>

          <el-icon class="el-icon--right">
            <arrow-down />
          </el-icon>
        </span>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item @click="handleExitClick"
              ><el-icon><Setting /></el-icon> <span>退出登录</span>
            </el-dropdown-item>
            <el-dropdown-item divided
              ><el-icon><InfoFilled /></el-icon><span>个人信息</span></el-dropdown-item
            >
            <el-dropdown-item
              ><el-icon><Stamp /></el-icon><span>修改密码</span></el-dropdown-item
            >
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>
  </div>
</template>

<script setup lang="ts">
import { LOGIN_TOKEN } from '@/global/constances'
import { useRouter } from 'vue-router'
import { localcache } from '@/utils/cache'
const router = useRouter()
const handleExitClick = () => {
  localcache.delCache(LOGIN_TOKEN)
  router.push('/login')
}
</script>

<style lang="less" scoped>
.header-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  .operation {
    display: inline-flex;
    margin-right: 20px;
    span {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 40px;
      height: 35px;

      &:hover {
        background: #f2f2f2;
      }

      i {
        font-size: 20px;
      }

      .dot {
        position: absolute;
        top: 3px;
        right: 3px;
        z-index: 10;
        width: 6px;
        height: 6px;
        background: red;
        border-radius: 100%;
      }
    }
  }

  .user-info {
    display: flex;
    align-items: center;
    cursor: pointer;

    .name {
      margin-left: 8px;
    }
  }
}
</style>
